<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="common/common_head :: commonHeader('头像选择')"/>
    <link th:href="@{/static/css/plugins/cropper/cropper.min.css}" rel="stylesheet">
    <style>
        .cropper-container{
            width: 300px;
            height: 300px;
            top: 0px;
        }
    </style>
</head>

<body class="gray-bg">

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox-content">

        <div class="row">
            <div class="col-sm-6">
                <div class="image-crop" id="imageCutting" style="width: 300px;height: 300px">
                    <img id="picImg" th:src="@{${picId != ''? '/sys/user/getPic/'+ picId : '/static/img/example.png'}}">
                </div>
                <div class="btn-group">
                    <button class="btn btn-warning" id="setDrag" type="button">裁剪</button>
                    <button class="btn btn-white" id="zoomIn" type="button">放大</button>
                    <button class="btn btn-white" id="zoomOut" type="button">缩小</button>
                    <button class="btn btn-white" id="rotateLeft" type="button">左旋转</button>
                    <button class="btn btn-white" id="rotateRight" type="button">右旋转</button>
                </div>
            </div>
            <div class="col-sm-4">
                <h4>图片预览：</h4>
                <div class="img-preview img-preview-sm"></div>
                <div class="form-group">
                    <div style="margin-top: 12px">
                        <label title="上传图片" for="inputImage" class="btn btn-success"><i class="fa fa-upload"></i>&nbsp;&nbsp;
                            <input type="file" accept="image/*" name="file" id="inputImage" class="hide"> 上传新图片
                        </label>
                        <button class="btn btn-primary" type="button" onclick="getFinalCanvas()"><i
                                class="fa fa-check"></i>&nbsp;确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--引入公共js-->
<div th:include="common/onload_js :: onloadJS"></div>
<script th:src="@{/static/js/plugins/cropper/cropper.min.js}"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var picId = $("#picId").val();

        var $image = $("#imageCutting > img")
        $($image).cropper({
            aspectRatio: 1.618,
            preview: ".img-preview",
            done: function (data) {
                // 输出结果
            }
        });

        var $inputImage = $("#inputImage");
        if (window.FileReader) {
            $inputImage.change(function () {
                var fileReader = new FileReader(),
                    files = this.files,
                    file;

                if (!files.length) {
                    return;
                }

                file = files[0];

                if (/^image\/\w+$/.test(file.type)) {
                    fileReader.readAsDataURL(file);
                    fileReader.onload = function () {
                        $inputImage.val("");
                        $image.cropper("reset", true).cropper("replace", this.result);
                    };
                } else {
                    showMessage("请选择图片文件");
                }
            });
        } else {
            $inputImage.addClass("hide");
        }

        $("#download").click(function () {
            window.open($image.cropper("getDataURL"));
        });

        $("#zoomIn").click(function () {
            $image.cropper("zoom", 0.1);
        });

        $("#zoomOut").click(function () {
            $image.cropper("zoom", -0.1);
        });

        $("#rotateLeft").click(function () {
            $image.cropper("rotate", 45);
        });

        $("#rotateRight").click(function () {
            $image.cropper("rotate", -45);
        });

        $("#setDrag").click(function () {
            $image.cropper("setDragMode", "crop");
        });
    })

    //确定按钮
    function getFinalCanvas() {
        var $image = $('#imageCutting > img');
        var dataURL = $image.cropper("getDataURL");
        parent.setImageUrl(dataURL);
        Dialog.closeFrame(window.name);
    }

</script>

</body>
</html>
